<template>
  <div>
    <sheader :title="title" />
    <el-row>
      <div class="page-container" draggable="true" @drop='drop($event)' @dragover='allowDrop($event)'>
        <div id="uploader" class="wu-example">
          <el-row class="step-el">
            <el-steps :space="100" :active="active" finish-status="success">
              <el-step title="步骤 1" description="拖拽文件或文件夹"></el-step>
              <el-step title="步骤 2" description="连接ssh服务"></el-step>
              <el-step title="步骤 3" description="上传"></el-step>
            </el-steps>
          </el-row>
          <el-table :data="list" style="width: 100%;margin-top:20px;">
            <el-table-column type="expand">
              <template scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="文件名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="文件类型">
                    <span>{{ props.row.lx }}</span>
                  </el-form-item>
                  <el-form-item label="路径">
                    <span>{{ props.row.path }}</span>
                  </el-form-item>
                  <el-form-item label="文件大小">
                    <span>{{ props.row.size }}kb</span>
                  </el-form-item>
                  <el-form-item label="修改时间">
                    <span>{{ props.row.lastModified }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="文件名称" prop="name">
            </el-table-column>
            <el-table-column label="类型" prop="lx">
            </el-table-column>
            <el-table-column label="操作">
              <template scope="props">
                <el-button type="text" size="small" icon="delete" @click="delRow(props.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-row>
    <el-row class="step-el">
      <el-button type="primary" @click="pub">发布</el-button>
    </el-row>
  </div>
</template>

<script>
import Sheader from '@/components/header'
import sshKit from '@/kit/sshKit'
import fs from 'fs'
export default {
  components: {
    Sheader
  },
  name: 'apisync',
  data() {
    return {
      title: 'API同步',
      list: [],
      active: 0
    }
  },
  methods: {
    drop: function(event) {
      event.preventDefault();
      let files = event.dataTransfer.files;
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        file.lx = file.type;
        if (file.type == "") {
          if (fs.lstatSync(file.path).isDirectory()) {
            file.lx = "文件夹";
          }
        }

        this.list.push(file);
      }
    },
    allowDrop: function(event) {
      event.preventDefault();
    },
    delRow(_index) {
      this.list.splice(_index, 1);
    },
    async pub() {
      let fileList = this.list,
        len = fileList.length;
      if (fileList == 0) {
        this.$notify({
          title: '警告',
          message: '请放入上传的文件或文件夹',
          type: 'warning'
        });
        return;
      }
      let $lod = this.$loading({ fullscreen: true, text: '上传中' });
      let conn = await sshKit.open();
      console.log(conn);
      $lod.close();
      /* let conn = await sshKit.open();
      if (!conn) {
        this.$notify({
          title: '警告',
          message: '连接服务器错误',
          type: 'warning'
        });
        $lod.close();
        return;
      }
      var to = '/data/web/api'
      var fArr = [], sArr = [];
      for (var i = 0; i < len; i++) {
        let file = fileList[i];
        if (file.lx == "文件夹") {
          let status = await conn.putDirectory(file.path, to, {
            recursive: true,
            tick: function(localPath, remotePath, error) {
              if (error) {
                fArr.push(localPath)
              } else {
                sArr.push(localPath)
              }
            }
          })
          console.log('dire:');
          console.log(status);
        }
      }
      console.log(sArr);
      console.log(fArr);
      conn.dispose(); */

    }
  },
  watch: {
    list(val, oldVal) {
      let currentActive = this.active;
      if (val.length == 0) {
        this.active = 0;
      } else {
        this.active = currentActive == 0 ? 1 : currentActive;
      }
    }

  }
}
</script>

<style scoped>
.page-container {
  margin-top: 10px;
}

p {
  margin: 0 0 10px;
}

.wu-example {
  position: relative;
  padding: 45px 15px 15px;
  margin: 15px 0;
  background-color: #fafafa;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
  border-color: #e5e5e5 #eee #eee;
  border-style: solid;
  border-width: 1px 0;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.step-el {
  text-align: center;
}
</style>



